<script setup>
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
</script>

<template>
<div class="info-container">
    <div class="login-box" v-if="!userStore.token">
        <div class="welcome">欢迎使用融销通!</div>
        <div class="btn-box">
            <RouterLink to="/login" class="login-btn">请登录</RouterLink>
            <RouterLink to="/login" class="register-btn">免费注册</RouterLink>
        </div>
    </div>
    <div class="user-box" v-else>
        <div class="user-avatar"><img src="@/assets/img/avatar-default.png" alt=""></div>
        <div class="user-info">
            <div class="username">Hi, {{ userStore.userInfo.username }}</div>
            <div class="other">尽享专属服务</div>
        </div>
    </div>
    <div class="info-list">
        <div class="info-title">
            <svg t="1692846451307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4070" width="20" height="20">
                <path d="M170.159 117.357h682.128c21.428 0 41.017 8.804 55.213 22.973l0.112 0.112c14.174 14.219 23.002 33.821 23.002 55.213v624.776c0 21.421-8.826 
                40.995-23.002 55.213l-0.112 0.112c-14.197 14.169-33.788 23.002-55.213 23.002H171.711c-21.455 0-41.023-8.832-55.219-23.002l-0.107-0.112c-14.174-14.219-23.002-33.793-23.002-55.213v-626.3c0-21.12 8.637-40.37 
                22.538-54.264l1.988-1.77c13.705-12.835 32.101-20.74 52.249-20.74z m682.129 55.816H170.16a21.102 21.102 0 0 0-13.907 5.231l-0.871 0.921c-3.814 3.79-6.186 9.078-6.186 14.806v626.301c0 6.052 2.345 11.5 6.158 
                15.481l0.357 0.385 0.134 0.107c3.981 4.031 9.625 6.538 15.866 6.538h680.577c6.052 0 11.528-2.345 15.509-6.158l0.38-0.38 0.112-0.107c4.008-3.981 6.509-9.653 
                6.509-15.866V195.656c0-6.052-2.339-11.528-6.13-15.481l-0.38-0.385-0.112-0.107c-4.002-4.03-9.647-6.509-15.889-6.509z" fill="" p-id="4071"></path>
                <path d="M232.921 340.562c-15.397 0-27.908-12.505-27.908-27.908 0-15.426 12.511-27.908 27.908-27.908H791.05c15.426 0 27.937 12.483 27.937 27.908 0 15.403-12.511 
                27.908-27.937 27.908H232.921zM250.686 452.206h187.185c12.695 0 24.308 5.209 32.648 13.572 8.363 8.341 13.572 19.975 13.572 32.677v186.638c0 12.751-5.209 24.308-13.572 
                32.698a46.156 46.156 0 0 1-32.648 13.521H251.233c-12.751 0-24.308-5.181-32.671-13.521-8.347-8.391-13.55-19.948-13.55-32.698V497.885c0-12.456 5.125-23.877 13.41-32.162l0.112-0.112c8.252-8.252 
                19.675-13.405 32.152-13.405z m177.589 55.845H260.83v167.445h167.445V508.051zM623.74 506.617c-15.426 0-27.908-12.505-27.908-27.903 0-15.403 12.483-27.908 27.908-27.908h167.311c15.426 0 27.937 
                12.505 27.937 27.908 0 15.398-12.511 27.903-27.937 27.903H623.74zM623.74 674.615c-15.426 0-27.908-12.539-27.908-27.964 0-15.375 12.483-27.908 27.908-27.908h167.311c15.426 0 27.937 12.532 
                27.937 27.908 0 15.426-12.511 27.964-27.937 27.964H623.74z" fill="" p-id="4072"></path>
            </svg>
            热门资讯
        </div>
        <ul>
            <li v-for="i in 9" :key="i"><a href="#">云南特产冬季水果大香蕉新鲜当季10斤农产品直销土产品农家山泉水</a></li>
        </ul>
    </div>
</div>
</template>

<style scoped lang='scss'>
.info-container {
    width: 300px;
    height: 540px;

    .login-box {
        width: 100%;
        height: 124px;
        padding: 10px 20px;
        background-color: #fff;

        .welcome {
            margin: 10px 0;
            text-align: center;
        }

        .btn-box {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;

            .login-btn, .register-btn {
                display: block;
                height: 40px;
                line-height: 36px;
                text-align: center;
                font-size: 14px;
                width: 110px;
            }

            .login-btn {
                color: #fff;
                line-height: 40px;
                background-color: #39bf3e;
            }

            .register-btn {
                color: #39bf3e;
                border: 2px solid #39bf3e;
            }
        }
    }

    .user-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 124px;
        padding: 25px 35px;
        background-color: #fff;

        $avatarW: 60px;
        .user-avatar {
            height: $avatarW;
            width: $avatarW;
            
            img {
                border-radius: $avatarW;
            }
        }

        .user-info {
            .other {
                margin-top: 5px;
                color: #999;
                font-size: 14px;
            }
        }
    }

    .info-list {
        width: 100%;
        height: 400px;
        background-color: #fff;
        margin-top: 16px;
        padding: 20px;

        .info-title {
            height: 40px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            line-height: 30px;
            font-weight: bold;
            border-bottom: 1px solid #f4f4f4;

            svg {
                vertical-align: -4px;
            }
        }

        ul>li {
            a {
                display: block;
                width: 100%;
                margin-bottom: 15px;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &:hover {
                text-decoration: underline;
            }

            &:last-child {
                padding-bottom: 5px;
                border-bottom: 1px solid #f4f4f4;
            }
        }
    }
}
</style>
